﻿@page "/Storages"
@using CloudStorage.Layou.Components.Dialogs
@using Microsoft.AspNetCore.Components.Forms

<div>

    <MToolbar Dark
              Prominent
              Height="55"
              Src="https://cdn.masastack.com/stack/images/website/masa-blazor/backgrounds/banner.png">

        <MButton Icon hidden="@(GetStorageListInput?.StorageId is null)" OnClick="GOBackAsync">
            <MIcon>mdi-arrow-left</MIcon>
        </MButton>
        <MSpacer></MSpacer>
        <MMenu Left
               Bottom>
            <ActivatorContent>
                <MAppBarNavIcon @attributes="@context.Attrs"></MAppBarNavIcon>
            </ActivatorContent>
            <ChildContent>
                <MList>
                    <MListItem @key="Guid.NewGuid()"
                               OnClick="()=>CreateFolder=true">
                        <MListItemTitle>创建文件夹</MListItemTitle>
                    </MListItem>

                    <MListItem @key="Guid.NewGuid()"
                               OnClick="ClickInputFileAsync">
                        <MListItemTitle>上传文件</MListItemTitle>
                    </MListItem>

                    <MListItem @key="Guid.NewGuid()"
                               OnClick="() =>RefreshAsync()">
                        <MListItemTitle>刷新</MListItemTitle>
                    </MListItem>
                </MList>
            </ChildContent>
        </MMenu>
    </MToolbar>

    @foreach (var item in StorageList?.Items)
    {
        <MCard Flat Class="list" >
            <MImage Style="border-radius: 18px;"
                @onclick="async ()=>await GetStorageAsync(item)"
                MaxHeight="85"
                MaxWidth="70"
                Height="85"
                Src="@(item.Preview?item.Icon:item.CloudUrl)">
            </MImage>
            <div style="max-height: 20px;text-overflow: ellipsis;overflow: hidden;">
                @item.Path
            </div>
            <div class="function" @onclick="()=>OnFunctionClickAsync(item)"><p>···</p></div>
        </MCard>
    }
</div>

<Storagefile @bind-HasFybctuib="HasFybctuib" Storage="ClickStorage" />

<DialogImages @bind-Show="DialogImagesShow"  @bind-Src=DialogImagesSrc></DialogImages>

<MOverlay Value="Load">
    <MProgressCircular indeterminate
                       Size="64"></MProgressCircular>
</MOverlay>

<CreateFolder @bind-Dialog=CreateFolder StorageId="GetStorageListInput.StorageId"></CreateFolder>

<style>

    .list {
        transition: .3s;
        float: left;
        height: 150px;
        margin: 5px;
        border-radius: 18px !important;
        width: 100px;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #EEEEEE !important;
        top: 20px;
    }

        .list:hover {
            transition: .3s;
            transform: scale(0.9);
        }

    .function {
        transition: .3s;
        font-size: 16px;
        border-radius: 18px;
        height: 20px;
        background-color: #FFD700;
        margin: 5px;
    }

        .function:hover {
            transition: .3s;
            background-color: #5682e7;
        }

        .function p {
            transition: 0.6s;
        }

            .function p:hover {
                transition: 0.6s;
                transform: rotate(-180deg);
            }
</style>